import React from "react";
import "./home.css";
import { Link } from "react-router-dom";
class home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    // this.handleClick = this.handleClick.bind(this);
  }
  // 路由跳转
  nav(child) {
    console.log(child);
    this.props.history.push({ pathname: "/css", query: child });
    //https://blog.csdn.net/qq8241994/article/details/85074581 路由传参地址介绍
    // this.props.history.push({ pathname: "/Detail", state: child });
  }
  render() {
    return (
      <div>
        {/* vue div包裹起来 */}
        <div>
          {/* a标签跳转 */}
          <div>
            <a href="/way/3">a标签路由跳转---way</a>
          </div>
          {/* 事件跳转 */}
          <div>
            <button onClick={() => this.props.history.push("way/4")}>
              通过函数跳转--way
            </button>
          </div>
          <div>
            <Link to={{ pathname: "/way/5" }}>link路由/5--- way</Link>
          </div>

          {/* 点击跳转 */}
          <div onClick={this.nav.bind(this, "world")}>事件路由跳转---css</div>
          {/* link 跳转 */}
          <Link to={{ pathname: "/css", query: "参数2" }}>
            link路由query--css
          </Link>
          <div>
            <Link to={{ pathname: "/opacity", query: "参数2" }}>
              opacity动画---opacity
            </Link>
          </div>
          <div>
            <Link to={{ pathname: "/router", query: "参数2" }}>
              嵌套路由---router
            </Link>
          </div>
          <div>
            <Link to={{ pathname: "/child", query: "参数2" }}>
              child嵌套路由---child
            </Link>
          </div>
          <div>
            <Link to={{ pathname: "/fo", query: "参数2" }}>嵌套路由---fo</Link>
          </div>
          <div>
            <Link to={{ pathname: "/com", query: "参数2" }}>嵌套路由---com</Link>
          </div>
          <div>
            <Link to={{ pathname: "/even", query: "参数2" }}>嵌套路由---even</Link>
          </div>
          <div>
            <Link to={{ pathname: "/load", query: "参数2" }}>嵌套路由---load</Link>
          </div>
          <div>
            <Link to={{ pathname: "/ajax", query: "参数2" }}>嵌套路由---ajax</Link>
          </div>
          <div>
            <Link to={{ pathname: "/table", query: "参数2" }}>嵌套路由---table</Link>
          </div>
          <div>
            <Link to={{ pathname: "/redux", query: "参数2" }}>嵌套路由---redux</Link>
          </div>
          <div>
            <Link to={{ pathname: "/redux1", query: "参数2" }}>嵌套路由---redux1</Link>
          </div>
        </div>
      </div>
    );
  }
}
//HTML方式：
// var data = {id:3};
// var path = {
//   pathname:'/role',
//   state:data,
// }
// <NavLink  to={path} >日志</NavLink>
// //JS方式：
// this.props.history.push({ pathname: '/three' , state: { id: '6666' }})

export default home;
